<template>
  <el-row :gutter="10">
    <el-col :span="5">
      <el-card>
        <OrgTree authority @node-click="handleOrgClick" />
      </el-card>
    </el-col>
    <el-col :span="19">
      <el-card class="layout-query">
        <el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList()">
          <el-form-item prop="timeRemaining" label="设备到期时间">
            <el-select
              v-model="state.queryForm.timeRemaining"
              clearable
              placeholder="请选择到期时间"
              size="default"
              style="width: 240px"
              @change="getDataList()">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input v-model="state.queryForm.keyWords" placeholder=""></el-input>
          </el-form-item>
          <el-form-item>
            <el-button icon="Search" type="primary" @click="getDataList()">查询</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card>
        <el-space>
          <el-space>
            <el-button
              v-auth="'gps:renewal:recharge:channelId'"
              icon="Plus"
              plain
              type="primary"
              @click="openTopUp('WX_NATIVE')"
              >批量充值</el-button
            >
          </el-space>
          <el-space>
            <el-button
              v-auth="'gps:renewal:recharge:channelId'"
              icon="Plus"
              type="primary"
              @click="openTopUp('SUPER_ADMIN')"
              >管理员批量充值</el-button
            >
          </el-space>
          <el-space>
            <el-button
              v-auth="'gps:renewal:recharge:channelId'"
              icon="Plus"
              type="primary"
              @click="addOrequipmentHandle"
              >管理员年费配置</el-button
            >
          </el-space>
        </el-space>
        <el-table
          v-loading="state.dataListLoading"
          :data="state.dataList"
          border
          class="layout-table"
          max-height="100vh"
          @selection-change="selectionChange">
          <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
          <el-table-column prop="plateNo" label="设备名称" header-align="center" align="center"></el-table-column>
          <el-table-column prop="imei" label="设备序号" header-align="center" align="center"></el-table-column>
          <el-table-column prop="sim" label="流量卡号" header-align="center" align="center"></el-table-column>
          <el-table-column prop="simType" label="卡商" header-align="center" align="center">
            <template #default="scope">
              <span v-if="scope.row.simType">{{ scope.row.simType }}</span>
              <el-button v-else type="primary" link @click="addCardMerchants(scope.row.iccid)">配置卡商</el-button>
            </template>
          </el-table-column>
          <!--          <el-table-column prop="simStartDate" label="流量开始时间" header-align="center" align="center"></el-table-column>-->
          <el-table-column prop="simEndDate" label="卡过期时间" header-align="center" align="center"></el-table-column>
          <el-table-column
            prop="platformEndDate"
            label="平台过期时间"
            header-align="center"
            align="center"></el-table-column>
          <el-table-column prop="annualAmount" label="平台年费" header-align="center" align="center"></el-table-column>
          <el-table-column prop="simAnnualAmount" label="卡年费" header-align="center" align="center"></el-table-column>
          <el-table-column prop="iccid" label="ICCID" header-align="center" align="center"></el-table-column>
          <el-table-column label="操作" fixed="right" header-align="center" align="center" width="150">
            <template #default="scope">
              <el-button type="primary" link @click="SimInfo(scope.row.iccid)">详情</el-button>
              <el-button type="primary" link @click="UpdateSim(scope.row.iccid)">更新SIM卡</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--        <el-pagination-->
        <!--          :current-page="state.page"-->
        <!--          :page-sizes="state.pageSizes"-->
        <!--          :page-size="state.limit"-->
        <!--          :total="state.total"-->
        <!--          layout="total, sizes, prev, pager, next"-->
        <!--          @size-change="sizeChangeHandle"-->
        <!--          @current-change="currentChangeHandle">-->
        <!--        </el-pagination>-->

        <!-- 弹窗, 新增 / 修改 -->
        <add-or-update ref="addOrUpdateRef" @refresh-data-list="getDataList"></add-or-update>
        <add-or-equipment ref="addOrequipmentRef" @refresh-data-list="getDataList"></add-or-equipment>
        <CardMerchants ref="cardMerchantsRef" @refresh-data-list="getDataList"></CardMerchants>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup lang="ts" name="BizMineIndex">
import { useCrud } from '@/hooks'
import { h, reactive, ref } from 'vue'
import { IHooksOptions } from '@/hooks/interface'
import AddOrUpdate from './add-or-update.vue'
import OrgTree from '@/views/sys/user/org-tree.vue'
import { ElMessage } from 'element-plus'
import AddOrEquipment from '@/views/gps/renewal/recharge/add-or-equipment.vue'
import CardMerchants from '@/views/gps/renewal/recharge/cardMerchants.vue'
import { UpdateSimApi } from '@/api/gps/recharge/recharge'
import { router } from '@/router'
import { createPopup } from '@/utils/gps/createPopup'
import simInfo from "@/views/gps/renewal/recharge/simInfo.vue";

const state: IHooksOptions = reactive({
  dataListUrl: '/gps/device/recharge/list',
  deleteUrl: '/biz/mine',
  isPage: false,
  queryForm: {
    keyWords: '',
    deptId: '',
    timeRemaining: undefined
  }
})
const imeiArray = ref([])
const options = [
  {
    value: '0',
    label: '已到期'
  },
  {
    value: '30',
    label: '30天内'
  },
  {
    value: '60',
    label: '60天内'
  },
  {
    value: '90',
    label: '90天内'
  },
  {
    value: '365',
    label: '一年内'
  }
]
const queryRef = ref()
const addOrUpdateRef = ref()
const addOrUpdateHandle = (id?: number) => {
  addOrUpdateRef.value.init(id)
}

//配置设备价格

const addOrequipmentRef = ref()
const cardMerchantsRef = ref()
const addOrequipmentHandle = () => {
  addOrequipmentRef.value.init(state.queryForm.deptId)
}
function addCardMerchants(iccid) {
  console.log(iccid)
  cardMerchantsRef.value.init(iccid)
}
const handleOrgClick = (orgId: any) => {
  state.queryForm.deptId = orgId
  getDataList()
}
function SimInfo(iccid) {
  console.log(iccid)
  createPopup(
    {
      default: (close) =>
        h(simInfo, {
          iccid: iccid,
          onClose: close
        })
    },
    {
      title: 'SIM卡详情',
      width: 400,
      height: 450,
      drag:true
    }
  )
  // router.push({ name: 'simInfoIndex', query: { iccid: iccid } })
  // window.open('http://tianqi.wosoiot.com/wechat/search/simSearchResult.action?iccid=' + iccid)
}

function UpdateSim(iccid) {
  UpdateSimApi(iccid).then((res) => {
    ElMessage.success({
      message: '操作成功',
      duration: 500,
      onClose: () => {
        getDataList()
      }
    })
  })
}
// function renewalSim(data) {
//   console.log(data.simType)
//   if (data.simType === null) {
//     ElMessage.error('未配置卡商禁止续费')
//     return
//   }
// addOrUpdateRef.value.init()
// renewalSimApi(data.iccid).then((res) => {
//   ElMessage.success({
//     message: '操作成功',
//     duration: 500,
//     onClose: () => {
//       getDataList()
//     }
//   })
// })
// }
function openTopUp(type) {
  if (imeiArray.value.length <= 0) {
    ElMessage.error({
      message: '请选择所需充值设备',
      duration: 500
    })
    return
  }
  addOrUpdateRef.value.init(imeiArray.value, type)
}

//获取设备列表
function selectionChange(vale) {
  imeiArray.value = []
  // console.log(imeiArray.value)
  vale.forEach((ref) => {
    imeiArray.value.push(ref.imei)
  })
}


const { getDataList, selectionChangeHandle, sizeChangeHandle, currentChangeHandle, deleteBatchHandle, reset } =
  useCrud(state)
</script>
<style></style>
